import React, { Component } from "react";
import {
  Input,
  Select,
  Button,
  Icon,
  Modal,
  Form,
  Checkbox,
  Popover
} from "antd";
import { connect } from "dva";
import feedback1 from "../../../../assets/feedback1.jpg";
import feedback2 from "../../../../assets/feedback2.jpg";
import feedback3 from "../../../../assets/feedback3.jpg";
import feedback4 from "../../../../assets/feedback4.jpg";
import feedback5 from "../../../../assets/feedback5.jpg";
import feedback6 from "../../../../assets/feedback6.jpg";
import feedback7 from "../../../../assets/feedback7.jpg";
import onlyPic from "../../../../assets/onlyPic.png";
import people from "../../../../assets/people.jpg";
import PicnText from "../../../../assets/PicnText.png";
import onlyText from "../../../../assets/onlyText.png";
import styles from "./ConfigPage.less";
import setvalues from "../setvalues";

const compare = ["抓拍图", "抓拍全景", "证件照"];

const { Option } = Select;
const { TextArea } = Input;

@connect(stores => ({
  coldata: stores.user,
  sceneData: stores.addScene
}))
@Form.create()
class ConfigPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sourceValue: props.source,
      dataInput: [],
      Content: [],
      contentPic: "",
      words: "",
      feedbackImg: null,
      contentImg: null,
      contentVisible: false,
      feedbackVisible: false,
      conEditVisible: false,
      visibleControl: null,
      SixCon: [],
      UrlData: [{ key: 0, value: "" }],
      picNum: 0,
      PicVisible: false,
      contentEditVisible: true,
      deleteData: [],
      deleteUrl: [],
      inputData: [1, 2],
      checked: [""], // 复选框选择
      exampleSrc: null,
      feedCheck: null,
      content: (
        <div style={{ fontSize: 14, color: "rgba(0,0,0,0.65)" }}>
          <span>请选择综合反馈模板需要</span>
          <br />
          <span>的反馈形式，并根据选择</span>
          <br />
          <span>的形式配置模板信息</span>
        </div>
      )
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.source !== prevState.sourceValue) {
      return {
        sourceValue: nextProps.source,
        UrlData:
          nextProps.source === "4"
            ? [
                { key: 0, value: "" },
                { key: 1, value: "" },
                { key: 2, value: "" }
              ]
            : [{ key: 0, value: "" }]
      };
    }
    return null;
  }

  componentDidMount() {
    setTimeout(() => {
      const { key } = this.props.sceneData;
      const { dispatch } = this.props;
      if (key.operate === "mod") {
        dispatch({
          type: "addScene/detailScene",
          payload: { sceneTemplateId: key.sceneTemplateId }
        }).then(() => {
          const { detailScene = {} } = this.props.sceneData;
          this.setValue(detailScene);
        });
      }
    }, 600);
    this.showExample();
  }

  setValue = detailScene => {
    let tmp;
    let tmpp;
    let feedCheckV;
    let feedTextV;
    const { ContentType, FeedbackType } = this.props;
    let defautCheck = [];
    if (detailScene.commentType === "107") {
      defautCheck = ["勾选反馈", "文本反馈", "图片反馈"];
      tmpp = feedback6;
      feedCheckV = true;
      feedTextV = true;
    } else if (detailScene.commentType === "106") {
      defautCheck = ["文本反馈", "勾选反馈"];
      tmpp = feedback7;
      feedCheckV = true;
      feedTextV = true;
    } else if (detailScene.commentType === "105") {
      defautCheck = ["勾选反馈", "图片反馈"];
      tmpp = feedback4;
      feedCheckV = true;
      feedTextV = true;
    } else if (detailScene.commentType === "104") {
      defautCheck = ["勾选反馈"];
      tmpp = feedback2;
      feedCheckV = true;
      feedTextV = true;
    } else if (detailScene.commentType === "103") {
      defautCheck = ["文本反馈", "图片反馈"];
      tmpp = feedback5;
      feedCheckV = true;
      feedTextV = true;
    } else if (detailScene.commentType === "102") {
      defautCheck = ["文本反馈"];
      tmpp = feedback1;
      feedCheckV = true;
      feedTextV = true;
    } else if (detailScene.commentType === "101") {
      defautCheck = ["图片反馈"];
      tmpp = feedback3;
      feedCheckV = true;
      feedTextV = true;
    } else {
      defautCheck = [""];
    }
    if (ContentType === "2") {
      tmp = PicnText;
      this.setState({
        PicVisible: true,
        contentEditVisible: true
      });
    }
    if (ContentType === "4") {
      tmp = people;
      this.setState({
        PicVisible: true,
        contentEditVisible: true
      });
    }
    if (ContentType === "1") {
      tmp = onlyText;
      this.setState({
        PicVisible: false,
        contentEditVisible: true
      });
    }
    if (ContentType === "3") {
      tmp = onlyPic;
      this.setState({
        PicVisible: true,
        contentEditVisible: false
      });
    }

    if (FeedbackType === "2") {
      tmpp = feedback1;
    }
    if (FeedbackType === "1") {
      tmpp = feedback2;
    }
    const { urlPic } = setvalues.setValues(detailScene);
    this.setState({
      feedbackImg: tmpp,
      visibleControl: FeedbackType,
      UrlData: urlPic,
      contentImg: tmp,
      contentPic: ContentType,
      defautCheck,
      feedCheck: feedCheckV,
      feedText: feedTextV,
      SixCon: this.contentShowGet(detailScene),
      inputData:
        this.setInputData(this.contentShowGet(detailScene)).length > 0
          ? this.setInputData(this.contentShowGet(detailScene))
          : [1, 2]
    });
  };

  contentShowGet = values => {
    if (values && values.contentType === "1") {
      let i = 1;
      const tmp = [];
      const { msgCommentSceneQueryList } = values;
      if (msgCommentSceneQueryList) {
        msgCommentSceneQueryList.forEach(item => {
          tmp.push({
            classify: `input${i}`,
            value: item.content
            // sceneTemplateId: item.sceneTemplateId,
            // commentTemplateId: item.commentTemplateId
          });
          i += 1;
        });
      }

      return tmp;
    }
    return [];
  };

  setInputData = data => {
    const temp = [];
    let i = 1;
    data.forEach(() => {
      temp.push(i);
      i += 1;
    });
    if (data.length % 2 !== 0) {
      temp.push(i);
    }
    return temp;
  };

  addInput = para => {
    const { dataInput, ContentEdit, num } = this.props;
    let tp = "";
    if (para === "input") {
      dataInput.push({ key: `input${num + 1}`, value: "" });
    } else if (para === "select") {
      dataInput.push({ key: `select${num + 1}`, value: "" });
    } else {
      dataInput.push({ key: `input${num + 1}`, value: "回车" });
      dataInput.forEach(items => {
        if (items.value === "回车") {
          tp += "\n";
        } else if (items.key.substring(0, 2) === "se") {
          tp += `{${items.value}}`;
        } else {
          tp += items.value;
        }
      });
    }
    this.props.getEdit(
      para === "return" ? tp : ContentEdit,
      dataInput,
      num + 1
    );
  };

  changeText = (e, item, ind) => {
    const { dataInput } = this.props;
    if (item.substring(0, 2) === "in") {
      dataInput[ind].value = e.target.value;
    }
    if (item.substring(0, 2) === "se") {
      dataInput[ind].value = e;
    }
    let tp = "";
    dataInput.forEach(items => {
      if (items.value === "回车") {
        tp += "\n";
      } else if (items.key.substring(0, 2) === "se") {
        tp += `{${items.value}}`;
      } else {
        tp += items.value;
      }
    });
    const { getEdit, num } = this.props;
    getEdit(tp, dataInput, num);
  };

  close = (item, index) => {
    const { dataInput } = this.props;
    const tmp = dataInput.filter((items, indexs) => indexs !== index);
    let tp = "";
    tmp.forEach(items => {
      if (items.value === "回车") {
        tp += "\n";
      } else if (items.key.substring(0, 2) === "se") {
        tp += `{${items.value}}`;
      } else {
        tp += items.value;
      }
    });
    const { getEdit, num } = this.props;
    getEdit(tp, tmp, num);
  };

  keyDown = e => {
    if (e.keyCode === 13) {
      const { dataInput, num, getEdit } = this.props;
      dataInput.push({ key: `input${num + 1}`, value: "回车" });
      let tp = "";
      dataInput.forEach(items => {
        if (items.value === "回车") {
          tp += "\n";
        } else if (items.key.substring(0, 2) === "se") {
          tp += `{${items.value}}`;
        } else {
          tp += items.value;
        }
      });
      getEdit(tp, dataInput, num + 1);
    }
  };

  contentModel = e => {
    let tmp;
    if (e === "2") {
      tmp = PicnText;
      this.setState({
        PicVisible: true,
        contentEditVisible: true
      });
    }
    if (e === "4") {
      tmp = people;
      this.setState({
        PicVisible: true,
        contentEditVisible: true
      });
    }
    if (e === "1") {
      tmp = onlyText;
      this.setState({
        PicVisible: false,
        contentEditVisible: true
      });
    }
    if (e === "3") {
      tmp = onlyPic;
      this.setState({
        PicVisible: true,
        contentEditVisible: false
      });
    }
    this.setState({
      contentImg: tmp,
      contentPic: e
    });
    const { getContent } = this.props;
    getContent(e);
    this.setState({
      UrlData:
        e === "4"
          ? [
              { key: 0, value: "" },
              { key: 1, value: "" },
              { key: 2, value: "" }
            ]
          : [{ key: 0, value: "" }],
      picNum: e === "4" ? 3 : 1
    });
  };

  feedbackModel = e => {
    let tmp;
    if (e === "2") {
      tmp = feedback1;
    }
    if (e === "1") {
      tmp = feedback2;
    }
    this.setState({
      feedbackImg: tmp,
      visibleControl: e
    });
    const { getFeedback } = this.props;
    getFeedback(e);
  };

  setFeedImg = () => {
    this.setState({
      feedbackVisible: true
    });
  };

  setConImg = () => {
    this.setState({
      contentVisible: true
    });
  };

  setCancel = () => {
    this.setState({
      feedbackVisible: false,
      contentVisible: false
    });
  };

  sixText = (e, classify) => {
    const { SixCon } = this.state;
    const { getShow } = this.props;
    let tmp = false;
    SixCon.forEach((item, index) => {
      if (item.classify === classify) {
        SixCon[index].value = e.target.value;
        tmp = true;
      }
    });
    if (!tmp) {
      const temp = {};
      temp.value = e.target.value;
      temp.classify = classify;
      // temp.add = 1;
      SixCon.push(temp);
    }
    getShow(SixCon);
    this.setState({
      SixCon
    });
  };

  addUrl = () => {
    const { urlGet } = this.props;
    const { UrlData, picNum } = this.state;
    const temp = {};
    temp.key = picNum + 1;
    // temp.add = 1;
    temp.value = "";
    UrlData.push(temp);
    this.setState({ UrlData, picNum: picNum + 1 });
    urlGet(UrlData);
  };

  delUrl = key => {
    const { urlGet } = this.props;
    const { UrlData } = this.state;
    const tmp = UrlData.filter(item => item.key !== key);
    this.setState({
      UrlData: tmp
    });
    urlGet(tmp);
  };

  selPic = (e, keys) => {
    const { UrlData } = this.state;
    UrlData.forEach((item, index) => {
      if (item.key === keys) {
        UrlData[index].value = e;
      }
    });
    this.setState({
      UrlData
    });
    const { urlGet } = this.props;
    urlGet(UrlData);
  };

  returnValueOfInput = type => {
    let values = "";
    this.state.SixCon.forEach(item => {
      if (item.classify === type) {
        values = item.value;
      }
    });
    return values;
  };

  addFeedbackInput = () => {
    const { inputData } = this.state;
    inputData.push(inputData.length + 1);
    inputData.push(inputData.length + 1);
    this.setState({ inputData });
  };

  onChangeCheck = checkedValues => {
    this.setState({
      defautCheck: checkedValues
    });
    this.showExample(checkedValues);
  };

  showExample = checkedValues => {
    const { checkValue = () => {} } = this.props;
    if (checkedValues) {
      if (checkedValues.length === 1 && checkedValues[0] === "勾选反馈") {
        checkValue("104");
        this.setState({
          exampleSrc: feedback2,
          feedbackImg: feedback2,
          feedCheck: true,
          feedText: false
        });
        // return feedback2;
      } else if (checkedValues.length === 0) {
        checkValue("100");
        this.setState({
          exampleSrc: null,
          feedCheck: false,
          feedText: false
        });
        // return feedback1;
      } else if (
        checkedValues.length === 1 &&
        checkedValues[0] === "文本反馈"
      ) {
        checkValue("102");
        this.setState({
          exampleSrc: feedback1,
          feedbackImg: feedback1,
          feedText: true,
          feedCheck: false
        });
        // return feedback1;
      } else if (
        checkedValues.length === 1 &&
        checkedValues[0] === "图片反馈"
      ) {
        checkValue("101");
        this.setState({
          exampleSrc: feedback3,
          feedbackImg: feedback3,
          feedCheck: false,
          feedText: false
        });
        // return feedback3;
      } else if (
        checkedValues.length === 2 &&
        checkedValues.indexOf("勾选反馈") > -1 &&
        checkedValues.indexOf("文本反馈") > -1
      ) {
        checkValue("106");
        this.setState({
          exampleSrc: feedback7,
          feedbackImg: feedback7,
          feedCheck: true,
          feedText: true
        });
        // return feedback7;
      } else if (
        checkedValues.length === 2 &&
        checkedValues.indexOf("勾选反馈") > -1 &&
        checkedValues.indexOf("图片反馈") > -1
      ) {
        checkValue("105");
        this.setState({
          exampleSrc: feedback4,
          feedbackImg: feedback4,
          feedCheck: true,
          feedText: false
        });
        // return feedback4;
      } else if (
        checkedValues.length === 2 &&
        checkedValues.indexOf("文本反馈") > -1 &&
        checkedValues.indexOf("图片反馈") > -1
      ) {
        checkValue("103");
        this.setState({
          exampleSrc: feedback5,
          feedbackImg: feedback5,
          feedText: true,
          feedCheck: false
        });
        // return feedback5;
      } else {
        checkValue("107");
        this.setState({
          exampleSrc: feedback6,
          feedbackImg: feedback6,
          feedCheck: true,
          feedText: true
        });
        // return feedback6;
      }
    } else {
      checkValue("104");
      this.setState({
        exampleSrc: null,
        feedCheck: false,
        feedText: false
      });
    }

    // return null;
  };

  handleTextFeed = e => {
    const { feedText } = this.props;
    feedText(e.target.value);
    // console.log("123", e.target.value);
  };

  render() {
    const {
      contentImg,
      feedbackImg,
      contentVisible,
      feedbackVisible,
      visibleControl,
      inputData,
      // checked,
      exampleSrc,
      feedCheck,
      feedText,
      defautCheck
    } = this.state;
    const {
      conVisible,
      editVisible,
      feedVisible,
      showVisible,
      // feedTextVisible,
      paramList = ["data", "name", "http:23820380//dwhihdw.png"]
    } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { getNoCon, editable } = this.props;
    const { contentEditVisible, PicVisible, content } = this.state;
    const plainOptions = ["勾选反馈", "文本反馈", "图片反馈"];
    return (
      <div className={styles.root}>
        <Modal
          visible={contentVisible}
          onCancel={this.setCancel}
          footer={null}
          closable
          width={392}
          bodyStyle={{
            padding: "42px 16px 16px 16px"
          }}
          // style={{ height: 600, width: 360 }}
        >
          <img
            src={contentImg}
            style={{
              height: 600,
              width: 360,
              border: "1px solid rgba(0,0,0,0.25)"
            }}
          />
        </Modal>
        <Modal
          visible={feedbackVisible}
          onCancel={this.setCancel}
          footer={null}
          closable
          width={392}
          bodyStyle={{ padding: "42px 16px 16px 16px" }}
        >
          <img
            src={feedbackImg}
            style={{
              height: 600,
              width: 360,
              border: "1px solid rgba(0,0,0,0.25)"
            }}
          />
        </Modal>
        <div className={styles.title}>内容配置</div>
        <div className={styles.basic}>
          <div className={styles.choice4}>
            <span className={styles.star}>*</span>内容模板：
            <Select
              className={conVisible ? styles.sel : styles.notEmpty}
              placeholder="请选择内容模板"
              onChange={e => this.contentModel(e)}
              value={this.props.ContentType}
              disabled={!editable}
            >
              <Option value="1">纯文本</Option>
              <Option value="2">图片+文本</Option>
              <Option value="3">纯图片</Option>
              <Option value="4">人像对比</Option>
            </Select>
          </div>
          {conVisible ? (
            <span className={styles.hint}>请选择内容模板</span>
          ) : null}
          {contentEditVisible ? (
            <div className={styles.choice4}>
              <span className={styles.star}>*</span>内容编辑：
              <div className={styles.rightPic}>
                {this.props.dataInput.map((item, index) =>
                  item.key.substring(0, 2) === "in" ? (
                    <div className={styles.smallinput} key={item.key}>
                      <Input
                        disabled={!editable || item.value === "回车"}
                        style={{ width: 120 }}
                        placeholder="请输入文本"
                        onChange={e => this.changeText(e, item.key, index)}
                        onKeyDown={e => this.keyDown(e)}
                        value={item.value}
                        maxLength={200}
                      />
                      <Icon
                        style={{
                          fontSize: 9,
                          color: "rgba(0,0,0,0.25)",
                          fontWeight: 500,
                          marginLeft: 6
                        }}
                        type="close"
                        onClick={
                          editable ? () => this.close(item.key, index) : null
                        }
                      />
                    </div>
                  ) : (
                    <div
                      className={styles.smallinput}
                      key={item.key}
                      onKeyDown={e => this.keyDown(e)}
                    >
                      <Select
                        disabled={!editable}
                        style={{ width: 120 }}
                        placeholder="请选择字段"
                        onChange={e => this.changeText(e, item.key, index)}
                        value={item.value}
                      >
                        {paramList.map(items => (
                          <Option value={items} key={items} title={items}>
                            {items}
                          </Option>
                        ))}
                      </Select>
                      <Icon
                        style={{
                          fontSize: 9,
                          color: "rgba(0,0,0,0.25)",
                          fontWeight: 500,
                          marginLeft: 6
                        }}
                        type="close"
                        onClick={
                          editable ? () => this.close(item.key, index) : null
                        }
                      />
                    </div>
                  )
                )}

                <Button
                  type="dashed"
                  icon="plus"
                  style={{ marginRight: 8 }}
                  onClick={() => this.addInput("input")}
                  disabled={!editable}
                >
                  添加文本
                </Button>
                <Button
                  type="dashed"
                  icon="plus"
                  style={{ marginRight: 8 }}
                  onClick={() => this.addInput("select")}
                  disabled={!editable}
                >
                  添加字段
                </Button>
                <Button
                  type="dashed"
                  onClick={() => this.addInput("return")}
                  disabled={!editable}
                >
                  回车
                </Button>
              </div>
            </div>
          ) : null}
          {contentEditVisible ? (
            <div className={styles.choice5}>
              内容展示：
              <TextArea
                className={editVisible ? styles.input : styles.notE}
                disabled
                style={{ width: 466, height: 120 }}
                value={this.props.ContentEdit}
                // placeholder="请输入场景内容"
              />
            </div>
          ) : null}
          {editVisible ? (
            <span className={styles.hint}>内容不能为空</span>
          ) : null}

          {PicVisible && this.props.ContentType !== "4" ? (
            <div>
              <div className={styles.choice8}>
                <span className={styles.star}>*</span>图片URL：
                <div className={styles.rightPic1}>
                  {this.state.UrlData.map((item, index) => (
                    <div
                      style={{ marginBottom: 16, display: "flex" }}
                      key={item.key}
                    >
                      <Select
                        disabled={!editable}
                        className={
                          this.props.picVisible ? styles.sel : styles.notEmpty
                        }
                        onChange={e => this.selPic(e, item.key)}
                        value={item.value}
                      >
                        {paramList.map(items => (
                          <Option value={items} key={items}>
                            {items}
                          </Option>
                        ))}
                      </Select>
                      <div style={{ display: "flex" }}>
                        <Icon
                          disabled={!editable}
                          type="plus"
                          style={{
                            marginLeft: 16,
                            color: "rgba(0,0,0,0.2)",
                            marginTop: 8,
                            cursor: "pointer"
                          }}
                          onClick={this.addUrl}
                        />
                        {this.state.UrlData.length >= 2 ? (
                          <Icon
                            disabled={!editable}
                            type="minus"
                            style={{
                              marginLeft: 16,
                              color: "rgba(0,0,0,0.2)",
                              marginTop: 8,
                              cursor: "pointer"
                            }}
                            onClick={() => this.delUrl(item.key, index)}
                          />
                        ) : null}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              {this.props.picVisible ? (
                <span className={styles.hint1}>图片url不能为空</span>
              ) : null}
            </div>
          ) : null}

          <div className={styles.choice4}>
            <span className={styles.star}>*</span>反馈模板：
            <div>
              <Select
                className={feedVisible ? styles.sel : styles.notEmpty}
                placeholder="请选择反馈模板"
                onChange={e => this.feedbackModel(e)}
                value={this.props.FeedbackType}
                disabled={!editable}
              >
                <Option value="1">勾选反馈</Option>
                <Option value="2">文本反馈</Option>
                <Option value="3">综合反馈模板</Option>
              </Select>
              <Popover
                content={content}
                trigger="hover"
                style={{
                  width: 149,
                  height: 67,
                  paddingLeft: 9,
                  paddingTop: 4
                }}
              >
                <Icon
                  type="question-circle"
                  theme="filled"
                  style={{
                    color: "rgba(0,0,0,0.25)",
                    position: "absolute",
                    marginLeft: 8,
                    marginTop: 8
                  }}
                />
              </Popover>
            </div>
          </div>
          <Checkbox.Group
            options={plainOptions}
            defaultValue={defautCheck}
            value={defautCheck}
            onChange={this.onChangeCheck}
            style={
              visibleControl === "3"
                ? { position: "relative", left: -53, paddingBottom: 16 }
                : { display: "none" }
            }
          />
          {feedVisible ? (
            <span className={styles.hint}>请选择反馈模板</span>
          ) : null}
          <div className={styles.choice4}>
            <span className={styles.star}>*</span>模板示例：
            <div className={styles.rightPic}>
              {contentImg ? (
                <img
                  src={contentImg}
                  className={`${styles.pic} ${styles.right}`}
                  onClick={this.setConImg}
                />
              ) : (
                <div className={`${styles.model} ${styles.right}`}>
                  内容模板
                </div>
              )}
              {feedbackImg || exampleSrc ? (
                <img
                  src={feedbackImg || exampleSrc}
                  className={styles.pic}
                  onClick={this.setFeedImg}
                />
              ) : (
                <div className={styles.model}>反馈模板</div>
              )}
            </div>
          </div>
          {feedbackImg && visibleControl === "1" && (
            <div>
              <div className={styles.choiceFeedback}>
                <span className={styles.star}>*</span>反馈文本：
                <div className={styles.rightFeedback}>
                  {inputData.map(item => (
                    <div key={item} style={{ display: "flex" }}>
                      <Input
                        disabled={!editable}
                        className={
                          showVisible ? styles.smallIn1 : styles.notsmallIn1
                        }
                        style={{ marginRight: item % 2 === 0 ? 0 : 8 }}
                        placeholder={`请输入文本${item}`}
                        onChange={e => this.sixText(e, `input${item}`)}
                        maxLength={25}
                        value={this.returnValueOfInput(`input${item}`)}
                      />
                      {item % 2 === 0 && inputData.length < 8 ? (
                        <Icon
                          type="plus"
                          style={{
                            marginLeft: 16,
                            color: "rgba(0,0,0,0.2)",
                            marginTop: 8,
                            cursor: "pointer"
                          }}
                          onClick={
                            !editable ? null : () => this.addFeedbackInput()
                          }
                        />
                      ) : null}
                    </div>
                  ))}
                </div>
              </div>
              {showVisible ? (
                <div className={styles.checkV}>
                  <span className={styles.hint}>请至少填写两个文本</span>
                </div>
              ) : null}
            </div>
          )}
          {visibleControl === "2" && (
            <div className={styles.choice6}>
              字段无数据时显示内容：
              <Form>
                <Form.Item>
                  {getFieldDecorator("scene", {
                    rules: [{ max: 25, message: "最长25个字" }],
                    initialValue: this.props.noContent
                  })(
                    <Input
                      disabled={!editable}
                      style={{ width: 466 }}
                      placeholder="请输入场景内容，25字以内"
                      onChange={getNoCon}
                      value={this.props.noContent}
                    />
                  )}
                </Form.Item>
              </Form>
            </div>
          )}
          {feedCheck && visibleControl === "3" && defautCheck && (defautCheck.join().indexOf('勾选反馈') > -1) && (
            <div>
              <div className={styles.choiceFeedback2}>
                <span className={styles.star}>*</span>勾选反馈配置：
                <div className={styles.rightFeedback}>
                  {inputData.map(item => (
                    <div key={item} style={{ display: "flex" }}>
                      <Input
                        disabled={!editable}
                        className={
                          showVisible ? styles.smallIn1 : styles.notsmallIn1
                        }
                        style={{ marginRight: item % 2 === 0 ? 0 : 8 }}
                        placeholder={`请输入文本${item}`}
                        onChange={e => this.sixText(e, `input${item}`)}
                        maxLength={25}
                        value={this.returnValueOfInput(`input${item}`)}
                      />
                      {item % 2 === 0 && inputData.length < 8 ? (
                        <Icon
                          type="plus"
                          style={{
                            marginLeft: 16,
                            color: "rgba(0,0,0,0.2)",
                            marginTop: 8,
                            cursor: "pointer"
                          }}
                          onClick={
                            !editable ? null : () => this.addFeedbackInput()
                          }
                        />
                      ) : null}
                    </div>
                  ))}
                </div>
              </div>
              {showVisible ? (
                <div className={styles.checkV}>
                  <span className={styles.hint}>请至少填写两个文本</span>
                </div>
              ) : null}
            </div>
          )}
          {feedText && visibleControl === "3" && (
            <div className={styles.choice6}>
              字段无数据时显示内容：
              <Form>
                <Form.Item>
                  {getFieldDecorator("scene", {
                    rules: [{ max: 25, message: "最长25个字" }],
                    initialValue: this.props.noContent
                  })(
                    <Input
                      disabled={!editable}
                      style={{ width: 466 }}
                      placeholder="请输入场景内容，25字以内"
                      onChange={getNoCon}
                      value={this.props.noContent}
                    />
                  )}
                </Form.Item>
              </Form>
            </div>
          )}

          {PicVisible && this.props.ContentType === "4" ? (
            <div>
              {this.state.UrlData.map((item, index) => (
                <div
                  className={
                    compare[index] === "抓拍全景"
                      ? styles.choice11
                      : styles.choice10
                  }
                  key={item.key}
                >
                  <span className={styles.star}>*</span>
                  {compare[index]}：
                  <div className={styles.rightPic1}>
                    <div style={{ marginBottom: 16 }} key={item.key}>
                      <Select
                        className={
                          this.props.picVisible ? styles.sel : styles.notEmpty
                        }
                        onChange={e => this.selPic(e, item.key)}
                        value={item.value}
                        disabled={!editable}
                      >
                        {paramList.map(items => (
                          <Option value={items} key={items}>
                            {items}
                          </Option>
                        ))}
                      </Select>
                    </div>
                  </div>
                </div>
              ))}
              <div className={styles.choicelocation}>
                <span className={styles.star}>*</span>
                地点：
                <div className={styles.rightPic1}>
                  <div style={{ marginBottom: 16 }}>
                    <Select
                      className={
                        this.props.picVisible ? styles.sel : styles.notEmpty
                      }
                      onChange={this.props.selLocation}
                      value={this.props.location}
                      disabled={!editable}
                    >
                      {paramList.map(items => (
                        <Option value={items} key={items}>
                          {items}
                        </Option>
                      ))}
                    </Select>
                  </div>
                </div>
              </div>
              <div className={styles.choice10}>
                <span className={styles.star}>*</span>
                相似度：
                <div className={styles.rightPic1}>
                  <div style={{ marginBottom: 16 }}>
                    <Select
                      disabled={!editable}
                      className={
                        this.props.picVisible ? styles.sel : styles.notEmpty
                      }
                      onChange={this.props.selSimilarity}
                      value={this.props.Similarity}
                    >
                      {paramList.map(items => (
                        <Option value={items} key={items}>
                          {items}
                        </Option>
                      ))}
                    </Select>
                  </div>
                </div>
              </div>
              {this.props.picVisible ? (
                <span className={styles.hint1}>图片url不能为空</span>
              ) : null}
            </div>
          ) : null}
        </div>
      </div>
    );
  }
}

export default ConfigPage;
